<template>
  <div class="tech-detail-page">
    <div class="page-header">
      <button class="btn btn-back" @click="goBack">
        <i class="icon-arrow-left"></i>
        返回
      </button>
      <h1>{{ tech?.name }}</h1>
    </div>

    <div v-if="tech" class="tech-content">
      <div class="tech-overview">
        <img :src="tech.icon" :alt="tech.name" class="tech-icon-large">
        <div class="tech-meta">
          <div class="meta-item">
            <i class="icon-star"></i>
            <span>{{ tech.stars }} 收藏</span>
          </div>
          <div class="meta-item">
            <i class="icon-users"></i>
            <span>{{ tech.users }} 用户</span>
          </div>
          <div class="meta-item">
            <i class="icon-trend"></i>
            <span>{{ tech.trend }} 趋势</span>
          </div>
        </div>
        <div class="tech-actions">
          <button class="btn btn-primary">
            <i class="icon-star"></i>
            收藏技术
          </button>
          <button class="btn btn-secondary">
            <i class="icon-share"></i>
            分享
          </button>
        </div>
      </div>

      <div class="tech-description">
        <h2>技术简介</h2>
        <p>{{ tech.description }}</p>
      </div>

      <div class="tech-features">
        <h2>主要特性</h2>
        <ul>
          <li v-for="feature in tech.features" :key="feature">
            {{ feature }}
          </li>
        </ul>
      </div>

      <div class="tech-resources">
        <h2>学习资源</h2>
        <div class="resource-list">
          <a 
            v-for="resource in tech.resources" 
            :key="resource.url"
            :href="resource.url"
            target="_blank"
            class="resource-item"
          >
            <i :class="['icon', resource.icon]"></i>
            <span>{{ resource.name }}</span>
          </a>
        </div>
      </div>

      <div class="tech-community">
        <h2>社区资源</h2>
        <div class="community-links">
          <a href="#" class="community-item">
            <i class="icon-github"></i>
            <span>GitHub 仓库</span>
          </a>
          <a href="#" class="community-item">
            <i class="icon-doc"></i>
            <span>官方文档</span>
          </a>
          <a href="#" class="community-item">
            <i class="icon-forum"></i>
            <span>技术论坛</span>
          </a>
          <a href="#" class="community-item">
            <i class="icon-blog"></i>
            <span>技术博客</span>
          </a>
        </div>
      </div>

      <div class="tech-examples">
        <h2>示例项目</h2>
        <div class="example-list">
          <div class="example-item">
            <h3>入门示例</h3>
            <p>一个简单的入门项目，展示基本功能</p>
            <a href="#" class="btn btn-link">查看示例</a>
          </div>
          <div class="example-item">
            <h3>进阶项目</h3>
            <p>包含更多高级特性的完整项目</p>
            <a href="#" class="btn btn-link">查看示例</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { categories } from '~/data/tech-data'

const route = useRoute()
const router = useRouter()
const tech = ref(null)

// 获取技术详情
const fetchTech = () => {
  const techId = parseInt(route.params.id)
  
  for (const category of categories) {
    const found = category.technologies.find(t => t.id === techId)
    if (found) {
      tech.value = found
      break
    }
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

onMounted(() => {
  fetchTech()
})
</script>

<style scoped>
.tech-detail-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-back:hover {
  background-color: var(--bg-secondary);
}

.tech-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tech-overview {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px;
  background-color: var(--bg-secondary);
  border-radius: 8px;
}

.tech-icon-large {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.tech-meta {
  display: flex;
  gap: 32px;
  margin-right: auto;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.tech-actions {
  display: flex;
  gap: 16px;
}

.tech-description,
.tech-features,
.tech-resources,
.tech-community,
.tech-examples {
  padding: 24px;
  background-color: var(--bg-secondary);
  border-radius: 8px;
}

h2 {
  margin: 0 0 16px;
  font-size: 24px;
}

.tech-features ul {
  margin: 0;
  padding-left: 20px;
}

.tech-features li {
  margin-bottom: 8px;
}

.resource-list,
.community-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.resource-item,
.community-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s;
}

.resource-item:hover,
.community-item:hover {
  background-color: var(--bg-color);
}

.example-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.example-item {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.example-item h3 {
  margin: 0 0 8px;
}

.example-item p {
  margin: 0 0 12px;
  color: var(--text-secondary);
}

.btn-link {
  color: var(--primary-color);
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .tech-overview {
    flex-direction: column;
    text-align: center;
  }

  .tech-meta {
    margin-right: 0;
    justify-content: center;
  }

  .resource-list,
  .community-links {
    grid-template-columns: 1fr;
  }
}
</style> 